<template>
  <div id="navbarMenu">
    <a-row class="grid-demo" align="center" :wrap="false">
      <a-col flex="auto">
        <a-menu mode="horizontal" :selected-keys="selectedKeys">
          <a-menu-item
              key="0"
              :style="{ padding: 0, marginRight: '30px', fontSize: '20px'}"
          >
            <div class="logoBar" @click="jump('Home')">
              <div class="logoImage">
                <img src="../../assets/logo.png" alt="logo"/>
              </div>
              <div class="logoText">{{ systemConstant.WEB_NAME }}</div>
            </div>
          </a-menu-item>
          <a-menu-item
              v-for="item in menuItems"
              :key="item.meta?.title"
              @click="jump(item.name)"
          >
            {{ item.meta?.title }}
          </a-menu-item>
        </a-menu>
      </a-col>
      <a-col flex="100px">
        <a-dropdown v-if="loginUser.userId != -1"  trigger="hover">
          <div class="g-cursor-pointer-text">{{ loginUser.userName }}</div>
          <template #content>
            <a-doption><a-link @click="jump('UserInfo')">个人中心</a-link></a-doption>
            <a-doption><a-link @click="logout">退出登录</a-link></a-doption>
          </template>
        </a-dropdown>
        <div v-else @click="jump('Login')" class="g-cursor-pointer-text">未登录</div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import routes from "/src/router/routes";
import {computed, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import systemConstant from "/src/common/constant/system"
import {Message} from "@arco-design/web-vue";
import {UserControllerService} from "../../apis";

const router = useRouter();
const route = useRoute();
const selectedKeys = ref(["index"]);
const store = useStore();
const loginUser = ref({});

const baseRoutes = routes.filter((route) => route.name === "Base")[0];

const menuItems = computed(() => {
  return baseRoutes?.children?.filter((item) => {
    if (item.meta?.hide === "true") return false;
    return true;
  });
});

router.afterEach((to, from) => {
  selectedKeys.value = [to.meta.title];
});

const logout = async () => {
  const res = await store.dispatch("user/logout");
  if (res === true) {
    Message.success("退出成功")
    loginUser.value = await store.dispatch("user/getLoginUser")
    console.log(loginUser.value)
  } else {
    Message.error(res)
  }
}

const jump = (name) => {
  router.push({
    name,
  });
};

onMounted(async () => {
  selectedKeys.value = [route.meta.title];
  loginUser.value = await store.dispatch("user/getLoginUser");
});
</script>

<style scoped>
#navbarMenu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  opacity: 0.9;
  z-index: 99;
}

.logoBar {
  display: flex;
}

.logoImage img {
  height: 48px;
}

.logoText {
  height: 48px;
  line-height: 48px;
  background: linear-gradient(to right, #4B57B7, #23233F);
  background-clip: text;
  color: transparent; /* 隐藏原始文字颜色 */
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
}

</style>
